<template>
  <div>
    <h1>当前和是:{{ sum }}</h1>
    <h2 style="color:red">Person组件的总人数是:{{person.length}}</h2>
    <h2>放大10倍后的和{{ bigSum }}</h2>
    <h1>学校名称:{{ school }}--学科:{{ subject }}</h1>
    <select v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="increment(n)">+</button>
    <button @click="deincrement(n)">-</button>
    <button @click="incrementOdd(n)">当前和为奇数再加</button>
    <button @click="incrementWait(n)">等一等再加</button>
  </div>
</template>

<script>
// 导入映射方法
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
export default {
  name: "Count",
  data() {
    return {
      n: 1,
    };
  },
  // 使用映射方法 mapState mapGetters (用于计算属性)
  computed: {
    ...mapState('CountAbout',["sum", "school", "subject"]),
    ...mapState('PersonAbout',["person"]),
    ...mapGetters('CountAbout',["bigSum"]),
  },
  // 使用映射方法 mapMutations mapActions(用于事件函数)
  methods: {
    // 指定模块的前提:创建分类模块时配置命名空间namespaced:true
    ...mapMutations('CountAbout',{ increment: "JIA", deincrement: "JIAN" }),
    ...mapActions('CountAbout',{ incrementOdd: "jiaOdd", incrementWait: "jiawait" }),
  },
};
</script>
<style lang="css">
button {
  margin-left: 5px;
}
</style>